// 书籍详情
.book-detail {
  .top {
    height: 150rpx;
    background-color: #5469a2;
  }
  // 书籍内容
  .book-content {
    position: absolute;
    top: 70rpx;
    width: 100%;
    height: 100rpx;
    border-top-left-radius: 80rpx;
    border-top-right-radius: 80rpx;
    background-color: #fff;
    // 书籍信息
    .book-message {
      display: flex;
      padding: 0 20rpx;
      // 书籍封面
      .cover {
        position: relative;
        top: -40rpx;
        width: 160rpx;
        height: 200rpx;
        margin-right: 20rpx;
        box-shadow: 0px 1px 6px 1px rgba($color: #000000, $alpha: 0.2);
        // background-color: pink;
        image {
          width: 100%;
          height: 100%;
        }
      }
      // 书籍作者等
      .mess-right {
        margin-top: 10rpx;
        font-size: 22rpx;
        color: #8d8d8d;
        .title {
          font-weight: 500;
          color: #212121;
          font-size: 30rpx;
        }
        .author {
          margin: 25rpx 0;
          text {
            color: #7fa6c5;
          }
        }
      }
    }
    // 简介
    .book-intro {
      padding: 0 20rpx;
      padding-bottom: 20rpx;
      border-bottom: 10rpx solid #f6f7f9;
      .intro {
        color: #7f8088;
        font-size: 28rpx;
        margin: 20rpx 0;
      }
      // 目前目录
      .catalog {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 28rpx;
        .chapter {
          color: #8d959e;
          font-size: 24rpx;
          margin-left: 10rpx;
        }
        .cata-right {
          color: #a7b3ba;
          font-size: 24rpx;
          .iconfont {
            font-size: 24rpx;
            margin-left: 10rpx;
          }
        }
      }
    }
    // 评论
    .comment {
      margin: 20rpx;
      // 评论上方
      .comment-top {
        display: flex;
        justify-content: space-between;
        .comment-title {
          color: #707070;
          &::before {
            content: '';
            display: inline-block;
            width: 5rpx;
            height: 24rpx;
            border-radius: 10rpx;
            margin-right: 15rpx;
            color: #707070;
            background-color: #616161;
          }
        }
        .write-comment {
          display: flex;
          padding: 8rpx 6rpx;
          align-items: center;
          border-radius: 6rpx;
          font-size: 26rpx;
          color: #707070;
          border: 3rpx solid #676767;
          .iconfont {
            color: #707070;
            font-size: 26rpx;
            margin-right: 5rpx;
          }
        }
      }
      // 评论主体
      .comment-main {
        margin-top: 40rpx;
        // 每一条评论
        .comment-item {
          display: flex;
          margin-bottom: 40rpx;
          // 用户头像
          .user-logo {
            margin-right: 20rpx;
            .img {
              width: 80rpx;
              height: 80rpx;
              // background-color: pink;
              image {
                width: 100%;
                height: 100%;
                border-radius: 50%;
              }
            }
          }
          // 用户评论信息
          .comment-message {
            flex: 1;
            font-size: 24rpx;
            // 用户名及点赞数
            .useranme-thumb {
              display: flex;
              justify-content: space-between;
              margin: 6rpx 0;
              // 用户名
              .left {
                .username {
                  color: #79a9dc;
                  margin-right: 10rpx;
                }
                .level {
                  padding: 0 6rpx;
                  font-size: 16rpx;
                  border-radius: 6rpx;
                  color: #cb939d;
                  border: 3rpx solid #cb939d;
                }
              }
              // 点赞数
              .right {
                color: #959595;
                .iconfont {
                  font-size: 28rpx;
                  margin-left: 5rpx;
                }
                .active {
                  color: red;
                }
              }
            }
            // 评论时间
            .comment-date {
              margin-bottom: 15rpx;
              color: #959595;
            }
            // 评论文本
            .comment-text {
              line-height: 45rpx;
              font-size: 28rpx;
            }
          }
        }
        // 查看评论
        .watch-comment {
          width: 280rpx;
          height: 60rpx;
          line-height: 60rpx;
          margin: 0 auto;
          text-align: center;
          border-radius: 10rpx;
          font-size: 28rpx;
          color: #9a9a9a;
          border: 3rpx solid #9a9a9a;
          // background-color: pink;
        }
        // 写第一条评论
        .first-comment {
          font-size: 28rpx;
          color: #999999;
          text-align: center;
          .writeBtn {
            margin: 0 auto;
            padding: 10rpx 30rpx;
            width: 100rpx;
            height: 30rpx;
            margin-top: 20rpx;
            border-radius: 30rpx;
            color: #456fdd;
            border: 3rpx solid #456fdd;
          }
        }
      }
    }
  }
  
}
// 底部加入书架及开始阅读
.book-bottom {
  display: flex;
  justify-content: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  padding: 20rpx 0;
  border-top: 3rpx solid #eee;
  background-color: #fff;
  .bookshelf {
    margin-right: 140rpx;
    .iconfont {
      font-size: 40rpx;
      margin-right: 20rpx;
      vertical-align: bottom;
    }
    .atShelf {
      color: #e5e5e5;
      .iconfont {
        color: #e5e5e5;
      }
    }
  }
  .readbook {
    color: #fff;
    padding: 0 80rpx;
    border-radius: 50rpx;
    background-color: #456fdd;
  }
}
// 评论框
.comment-bar {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  z-index: 5;
  .comment-top {
    width: 100%;
    height: 70%;
    background-color: rgba($color: #000000, $alpha: 0.2);
  }
  .comment-bottom {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 30%;
    font-size: 28rpx;
    background-color: #fff;
    // 输入区域
  .text {
    width: 94%;
    // background-color: pink;
    margin: 20rpx;
  }
  // 功能条
  .fun-bar {
    margin: 20rpx;
    display: flex;
    justify-content: space-between;
    .wordSum {
      color: #9d9d9d;
      font-size: 26rpx;
    }
    .send-btn {
      padding: 8rpx 16rpx;
      font-size: 24rpx;
      color: #fff;
      border-radius: 5rpx;
      background-color: #e54e31;
    }
    .send-btn-no {
      padding: 8rpx 16rpx;
      font-size: 24rpx;
      color: #fff;
      border-radius: 5rpx;
      background-color: #f0a997;
    }
  }
  }
  
}